import { Button, Card, Input, Space, Table, Tree, Spin, Upload, Dropdown, Popconfirm, Modal, App } from 'antd';
import { useState, useEffect, useRef } from 'react'
import _ from 'lodash'
import ScrollTable from '../../../../common/ScrollTable';
import FetchHelper from '../../../../../utils/helper/fetch-helper';
import XytjApi from '../../../../../utils/apis/tj/XytjApi';
import { fields, getFields } from './fields';
import EditModal from './EditModal';
import { UpCircleOutlined } from '@ant-design/icons';
export default function Xytj(props) {
    const [total, setTotal] = useState();
    const [loading, setLoading] = useState();
    const rootRef = useRef();
    const [datas, setDatas] = useState([]);
    const [editOpen, setEditOpen] = useState();
    const [currentRecord, setCurrentRecord] = useState();

    const [params, setParams] = useState({
        pageSize: 10,
        pageNum: 1
    });

    const { modal, message } = App.useApp();


    useEffect(() => {
        XytjApi.list(params).then(resp => {
            setDatas(resp.rows)
            setTotal(resp.total);
        }).finally(e => {
            setLoading(false)
        })
    }, [params])

    return <div className='layout-h h100'>
        <Card size='small' className='h100 fill w0' style={{
            position: "relative"
        }} bodyStyle={{
            display: 'flex',
            flexDirection: "column",
            height: "100%"
        }}>
            <div style={{
                marginBottom: 12,
                display: 'flex',
                alignItems: "center",
                justifyContent: "space-between"
            }}>
                <Space>
                    <Button type='primary' onClick={e => {
                        setCurrentRecord(null);
                        setEditOpen(true);
                    }}>新增</Button>
                    <Upload showUploadList={false} {...{
                        name: 'file',
                        action: '/admin-api/ybyj/indexCounty/import',
                        headers: {
                            authorization: 'authorization-text',
                        },
                        beforeUpload(file) {
                            const isValidFormat = (file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');


                            if (!isValidFormat) {
                                message.error('只能上传 .xls格式的文件!');
                            }


                            return isValidFormat
                        },
                        onChange(info) {
                            console.log('node', info)
                            if (info.file.status === 'done') {
                                message.success(`${info.file.name} 文件上传成功`);
                            } else if (info.file.status === 'error') {
                                message.error(`${info.file.name} 文件上传失败！\n数据表格可能与本数据表不一致，最好先导出一份数据，使用其模板写入数据后在进行上传`);
                                alert(`上传失败！\n状态码：${info.file?.response?.code}。\n错误信息：${info.file?.response?.msg}。`)
                            }
                        },
                    }}>
                        <Button icon={<UpCircleOutlined />}>数据导入</Button>
                    </Upload>
                </Space>
            </div>
            <div ref={rootRef} className="fill h0">
                {<ScrollTable style={{
                    // border:"1px solid #ddd"
                }}
                    loading={loading}
                    parentNode={rootRef.current}
                    size='small'
                    bordered
                    dataSource={datas}
                    columns={[
                        ...getFields(['区域名称', '地区生产总值', '第一产业增加值', '第二产业增加值', '第三产业增加值', '人均地区生产总值', '全社会固定资产投资总额']),
                        {
                            title: '',
                            render: (t, record) => {
                                return <>
                                    <Button type="link" size='small' onClick={e => {

                                    }}>查看</Button>
                                    <Button type="link" size='small' onClick={e => {
                                        setCurrentRecord(record);
                                        setEditOpen(true);
                                    }}>编辑</Button>
                                    <Button type="link" danger size='small' onClick={e => {
                                        modal.confirm({
                                            title: "提示",
                                            content: "确定删除该条数据？",
                                            onOk: async () => {
                                                const resp = await XytjApi.del(record.id);
                                                if (resp.code === 200) {
                                                    message.success('删除成功');
                                                } else {
                                                    message.error('删除失败,' + resp.msg);
                                                }
                                                setParams(p => {
                                                    return {
                                                        ...p,
                                                        pageNum: 1
                                                    }
                                                })
                                            }
                                        })

                                    }}>删除</Button>
                                </>
                            }
                        }]}
                    pagination={{
                        current: params.pageNum,
                        pageSize: params.pageSize,
                        total,
                    }}
                    onChange={({ current }) => {
                        setParams(params => {
                            return {
                                ...params,
                                pageNum: current
                            }
                        })
                    }}
                />}
            </div>
        </Card>
        {editOpen && <EditModal record={currentRecord} open={editOpen} onCancel={e => {
            setEditOpen(false);
        }} onOk={e => {
            setEditOpen(false);
            setCurrentRecord(null);
            setParams(p => {
                return {
                    ...p,
                    pageNum: 1
                }
            })
        }} />}
    </div>;
}